<template>
        <Form inline ref="formValidate" :model="formValidate" :rules="ruleValidate">
                <Row>
                <Col span="10">
                    <FormItem label="处理组" :label-width="80" prop="nextHandlerGroupName">
                      <organizationGroup  v-on:changeOrganType="changeOrganType" ></organizationGroup>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="转派处理人" :label-width="80" prop="handlerOptionList">
                        <handler :data="options.handlerOptionList" v-on:getHandlerData="getHandlerData"></handler>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="是否加急" :label-width="80" prop="urgentFlag">  
                        <Select  style="width:100px" v-model="formValidate.urgentFlag">
                            <Option v-for="item in options.urgentOptionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="回复时效" :label-width="80" prop="limitTime">
                        <Select v-model="formValidate.limitTime"  style="width:500px">
                            <Option v-for="item in options.deadlineOptionList" :value="item.serviceValue" :key="item.serviceValue">{{ item.serviceName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="工单内容" :label-width="80" prop="remark">
                            <Input type="textarea" :rows="6" style="width:500px;" v-model="formValidate.remark"></Input>
                        </FormItem>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12" style="margin-left:80px;">
                    <FormItem>
                        <Button type="primary" @click="saveTask">提交</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import configService from 'service/configService.js'
    import taskService from 'service/taskService.js'
    import handlerGroup from 'components/formItem/handlerGroup.vue'
    import organizationGroup from 'components/formItem/organizationGroup.vue'
    import handler from 'components/formItem/handler.vue'
    export default {
        name: 'taskActionForm',
        props: {
            data: Object,
            func: Object
        },
        data() {
            return {
                formValidate: {
                    nextHandlerGroupId: "",
                    nextHandlerGroupName: "",
                    nextHandlerName: '',
                    nextHandlerId: '',
                    remark: this.data.content,
                    urgentFlag: 'false',
                    limitTime: ''
                },
                options: {
                    handlerGroupOptionList: [],
                    handlerOptionList: [],
                    urgentOptionList: [{
                        'label': '是',
                        'value': 'true'
                    }, {
                        'label': '否',
                        'value': 'false'
                    }],
                    deadlineOptionList: []
                },
                ruleValidate: {
                    nextHandlerGroupName: [{
                        required: true,
                        message: '请选择处理组！',
                        trigger: 'change'
                    }],
                    limitTime: [{
                        required: true,
                        message: '请选择回复时效！',
                        trigger: 'change'
                    }],
                    urgentFlag: [{
                        required: true,
                        message: '请选择是否加急！',
                        trigger: 'change'
                    }]

                    // remark: [{
                    //     required: true,
                    //     message: '请填写工单内容！',
                    //     trigger: 'blur'
                    // }]
                }
            }
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo',
                 untreatedNum: 'untreatedNum'
            })
        },
        created() {
            this.getReplyPeriodList()
        },
        components: {
            handler,
            organizationGroup
        },
        methods: {
            //流转工单
            saveTask() {
                let vm = this
                this.$refs['formValidate'].validate(async(valid) => {
                    if (valid) { //验证成功
                        let handlerInfodata = {
                            "curHandlerGroupId": this.loginUserInfo.curHandlerGroupId,
                            "curHandlerGroupName": this.loginUserInfo.curHandlerGroupName,
                            "curHandlerName": this.loginUserInfo.curHandlerName,
                            "curHandlerId": this.loginUserInfo.curHandlerId
                        }


                        let data = Object.assign(this.formValidate, handlerInfodata, {
                            'ticketId': this.data.propId,
                            "errorFlag": this.data.errorFlag,
                            "errorInfo": this.data.errorInfo,
                        })
                        let jsondata = await taskService.flowTask(data)


                        if (jsondata.state) {
                            this.func.remove()
                            this.$store.dispatch('getuntreatedNum', this.loginUserInfo.curHandlerId)
                            this.$router.push({
                                    name: 'taskuntreated_index'
                                })
                                //this.func.getTaskLogList(this.data.propId)
                            this.$Message.success(jsondata.msg);
                        } else {
                            this.$Message.warning(jsondata.msg);
                        }

                    }
                })

            },
            //回复实效
            async getReplyPeriodList() {
                let jsondata = await configService.getReplyPeriodList()
                this.options.deadlineOptionList = jsondata
            },
            // 根据组织架构的groupId 获得 该组成员列表
            async getHanderList(data) {
                let jsondata = await configService.getUsersByGroupId(data)
                this.options.handlerOptionList = jsondata

            },
            //监听handler组件中 change事件
            getHandlerData(data) {
                this.formValidate.nextHandlerId = data.value
                this.formValidate.nextHandlerName = data.label
            },
            //舰艇组织架构组件 change事件
            changeOrganType(data) {
                let index = parseInt(data.selectedData.length - 1)
                this.formValidate.nextHandlerGroupId = data.selectedData[index].value
                this.formValidate.nextHandlerGroupName = data.selectedData[index].label
                this.getHanderList({
                    "orgIdList": this.formValidate.nextHandlerGroupId
                })
            }
        }

    }
</script>